<template>
  <div class="app-container">

    <u-page title="班表管理">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="工号" prop="jobNo">
            <el-input v-model="listQuery.jobNo" placeholder="关键词搜索" clearable />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="listQuery.name" placeholder="关键词搜索" clearable />
          </el-form-item>
          <el-form-item label="部门" prop="dept">
            <el-input v-model="listQuery.dept" placeholder="关键词搜索" clearable />
          </el-form-item>
          <el-form-item label="商户" prop="merchantName">
            <el-input v-model="listQuery.merchantName" placeholder="关键词搜索" clearable />
          </el-form-item>
          <el-form-item label="年月">
            <el-date-picker
              v-model="listQuery.yearMonth"
              type="month"
              placeholder="年月"
              value-format="yyyyMM"
              clearable
              @change="changeYearMonth"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="scheduleFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <el-table :data="list">
        <el-table-column label="工号" prop="jobNo" align="center" width="100px" />
        <el-table-column label="姓名" prop="name" align="center" />
        <el-table-column label="部门" prop="dept" align="center" width="120px" />
        <el-table-column label="商户" prop="merchantName" align="center" width="150px"  />
        <el-table-column label="年月" prop="yearMonth" align="center" />
        <el-table-column label="创建时间" prop="createdAt" align="center" >
          <template slot-scope="scope">
            {{ scope.row.createdAt | date }}
          </template>
        </el-table-column>

        <el-table-column label="日期" align="center">
          <el-table-column label="星期" align="center" />
        </el-table-column>

        <el-table-column v-for="(date, index) in columnLabels[0]" :key="index" :label="date.toString()" align="center">
          <el-table-column :label="columnLabels[1][index]" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.classify[index] === '休'">
                <el-tag type="info">{{ scope.row.classify[index] }}</el-tag>
              </div>
              <div v-else>
                <el-tag type="success">{{ scope.row.classify[index] }}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <u-pagination
        v-show="list.length>0"
        :total="listQuery.totalCount"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.pageSize"
        @pagination="scheduleList"
      />

    </u-page>
  </div>
</template>
<script>

import MallFloor from '@/components/mall/floor.vue'

export default {
  components: { MallFloor },
  data() {
    return {
      api: this.$u.api.PluginsGuideSchedule,

      // 日期，星期标题
      columnLabels: [],

      // 表格
      columns: [
        {
          prop: 'name',
          label: '姓名'
        },
      ],

      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: true, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        name: '',
        jobNo: '',
        merchantName: ''
      },
      year: '',
      month: ''
    }
  },
  created() {
    this.scheduleList()
  },
  methods: {
    changeYearMonth(e) {
      if(e){
        this.year = e.slice(0, 4)
        this.month = e.slice(-2)
      }
    },
    // 查询班表
    scheduleFilter() {
      this.listQuery.page = 1
      this.scheduleList()
    },

    // 根据获取数据 封装对应年月日的星期数据格式
    getMonthCalendar(year, month) {
      this.columnLabels = []
      // 创建一个存储星期几的数组
      const weekdays = ['日', '一', '二', '三', '四', '五', '六']

      // 初始化结果数组
      const date = []
      const week = []

      // 添加每一天的日期和星期
      const daysInMonth = new Date(year, month, 0).getDate()

      for (let i = 1; i <= daysInMonth; i++) {
        const weekday = weekdays[(new Date(year, month - 1, i).getDay())]
        // result.push({ date: i, weekday })
        date.push(i)
        week.push(weekday)
      }
      this.columnLabels.push(date, week)
    },

    convertScheduleArray(scheduleArray) {
      return scheduleArray.map(item => item.value)
    },
    // 查询班表
    scheduleList() {
      const self = this
      // 打开加载状态
      self.listLoading = true

      // 查询分页数据
      self.api.list(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        if (res.data.list.length > 0) {
          const year = res.data.list[0].yearMonth.slice(0, 4)
          const month = res.data.list[0].yearMonth.slice(-2)
          self.getMonthCalendar(year, month)
        } else {
          self.columnLabels = []
        }

        self.list.forEach(item => {
          item.classify = self.convertScheduleArray(JSON.parse(item.classify))
        })
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      if (list.length === 0) {
        // 如果班表数据为空，可以提示用户或执行其他逻辑
        return
      }
      // 生成表头
      const tHeader = ['工号', '姓名', '部门', '商户', '年月']
      const filterVal = ['jobNo', 'name', 'dept', 'merchantName', 'yearMonth']

      // 生成日期表头
      for (let i = 1; i <= list[0].classify.length; i++) {
        tHeader.push(String(i))
        filterVal.push(String(i - 1))
      }
      // 生成数据
      const data = list.map(employee => {
        const classifyData = employee.classify

        const rowData = filterVal.map(key => {
          if (key in employee) {
            return employee[key]
          } else {
            const dayIndex = parseInt(key)
            return classifyData[dayIndex] ? classifyData[dayIndex].trim() : '' // 获取对应日期的班别信息
          }
        })
        return rowData
      })
      // 导出Excel
      this.$u.exports.excel('导购班表', tHeader, data)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

